<template>
  <div class="roommateBox">
      <header>
            <van-row justify="center">
                <van-col span="3" @click="goback">
                  <i class="iconfont icon-zuojiantou"></i>
                </van-col>
                <van-col span="18">找室友</van-col>
                <van-col span="3">
                    <i class="iconfont icon-liaotian"></i>
                </van-col>
            </van-row>
      </header>
      <div class="banner">
          <img src="../../../assets/gxhImages/findRoommate.jpg" alt="">
      </div>
      <div class="main">
          <ul>
              <li v-for="(item, index) in roommateList" :key='index'>
                  <span :class="{haveRoom:item.haveRoom}">{{ item.haveRoom|isHaveRoom }}</span>
                  <span>{{item.slogan}}</span>
                  <img :src="item.imgSrc" alt="">
                  <van-row>
                    <van-col span="2">
                        <div class="portrait">
                            <img :src="item.portrait" alt="">
                        </div>
                    </van-col>
                    <van-col span="3">
                        {{item.mateName}}
                    </van-col>
                    <van-col span="4">
                        <i v-if="item.gender" class="iconfont icon-nan" style="color: lightblue"></i>
                        <i v-else class="iconfont icon-nv" style="color: pink"></i>
                    </van-col>
                  </van-row>
              </li>
          </ul>
      </div>
      <div class="nav">
          <ul>
              <li class="iconfont icon-bianji"></li>
              <li class="iconfont icon-yanjing"></li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            roommateList: [
                {
                    haveRoom: false,
                    slogan: "有意思的小伙伴一起来奋斗吧",
                    imgSrc: "https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg",
                    mateName: "闫江南",
                    portrait: "https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto",
                    gender: 1
                },
                {
                    haveRoom: true,
                    slogan: "两个女生或一对情侣,35-40平超大卧室转租",
                    imgSrc: "https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg",
                    mateName: "黄柯容",
                    portrait: "https://img1.baidu.com/it/u=2293387543,515825917&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=420",
                    gender: 0
                }
            ]
        }
    },
    methods: {
        goback() {
            this.$router.push('/home')
        }
    },
    filters: {
        isHaveRoom(val) {
            return val ? "有房" : "无房"
        }
    }
}
</script>

<style scoped lang='less'>
header {
    width: 100%;
    height: 88px;
    background: rgb(255, 86, 84);
    .van-col {
        font-size: 36px;
        color: #fff;
        i {
            font-size: 36px;
            line-height: 88px;
        }
        text-align: center;
        line-height: 88px;
    }
}
.banner {
    img {
        width: 100%;
        height: 460px;
    }
}
.main {
    margin-top: -40px;
    ul {
        li {
            width: 710px;
            height: 344px;
            border-radius: 10px;
            box-shadow: 0px 0px 20px #ccc;
            background-color: #fff;
            position: relative;
            z-index: 1;
            margin: 0 auto;
            margin-bottom: 20px;
            color: rgba(0,0,0,0.8);
            font-size: 24px;
            span:nth-child(1) {
                display: inline-block;
                height: 43px;
                line-height: 43px;
                width: 100px;
                text-align: center;
                margin: 8px 20px 16px 20px;
                border-radius: 2px;
                border: 1px solid #e6e6e6;
            }
            .haveRoom {
                border: 2px solid rgb(255, 87, 82);
                color: rgb(255, 87, 82);
            }
            img {
                margin-left: 20px;
                width: 370px;
                height: 208px;
            }
            .van-row {
                margin-top: 12px;
                margin-left: 20px;
                line-height: 40px;
                .portrait {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        margin-left: 0;
                        width: 40px;
                        height: 40px;
                    }
                    i {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

.nav {
    position: fixed;
    bottom: 150px;
    right: 25px;
    width: 60px;
    height: 150px;
    z-index: 2;
    ul {
        li {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            font-size: 35px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            &:nth-child(1) {
                background-color: rgb(255, 86, 84);
                margin-bottom: 25px;
            }
            &:nth-child(2) {
                background-color: rgba(34, 155, 147, 0.178);
            }
        }
    }
}


</style>